<template>
  <div>
    <el-row>
      <el-col :span="12" style="border-right: 12px solid #f0f2f5">
        <h3 id="orderContentH3">售票渠道统计</h3>
        <div id="echart4"></div
      ></el-col>
      <el-col :span="12" style="border-right: 12px solid #f0f2f5">
        <h3 id="orderContentH3">退票渠道统计</h3>
        <div id="echart5"></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import utils from "../../js/index";
function zzsFun(arr) {
  var installList = [
    { traderaccount: "Alipay", zzs: 0 },
    { traderaccount: "atm", zzs: 0 },
    { traderaccount: "chebada", zzs: 0 },
    { traderaccount: "ctrip", zzs: 0 },
    { traderaccount: "fliggy", zzs: 0 },
    { traderaccount: "hn96520", zzs: 0 },
    { traderaccount: "Ministry", zzs: 0 },
    { traderaccount: "TongCheng", zzs: 0 },
    { traderaccount: "wechat", zzs: 0 },
    { traderaccount: "wechathn96520", zzs: 0 },
  ];
  installList.forEach((e, i) => {
    arr.forEach((y, x) => {
      if (e.traderaccount == y.traderaccount) {
        installList.splice(i, 1, y);
      }
    });
  });
  return installList;
}
export default {
  watch: {
    echart1(a, b) {
      this.echart1 = a;
      this.carried();
    },
    echart2(a, b) {
      this.echart2 = a;
      this.carried2();
    },

    deep: true,
  },
  props: ["echart2", "echart1"],
  data() {
    return {
      echartData1: [],
    };
  },
  mounted() {
    // this.carried();
    // this.carried2();
  },
  methods: {
    listData() {
      let bgColor = "#fff";
      let title = "售票数量";
      let color = [
        "#0E7CE2",
        "#FF8352",
        "#E271DE",
        "#465EFB",
        "#00FFFF",
        "#4AEAB0",
        "#90F7EC",
        "#CE9FFC",
        "#81FBB8",
        "#43CBFF",
      ];
      let echartData = zzsFun(this.echart1).map((e) => {
        return { value: e.zzs, name: e.traderaccount };
      });

      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      var option = {
        backgroundColor: bgColor,
        color: color,
        tooltip: {
          trigger: "item",
        },
        title: [
          {
            text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#666666",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
          {
            text: "单位：张",
            top: 20,
            left: 20,
            textStyle: {
              fontSize: 14,
              color: "#666666",
              fontWeight: 400,
            },
          },
        ],
        legend: {
          orient: "vertical",
          icon: "rect",
          x: "80%",
          y: "center",
          itemWidth: 12,
          itemHeight: 12,
          align: "left",
          left: "20px",
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
              },
              value: {
                fontSize: 16,
                padding: [0, 5, 0, 15],
              },
              unit: {
                fontSize: 12,
              },
            },
          },
          formatter: function (name) {
            let res = echartData.filter((v) => v.name === name);
            res = res[0] || {};
            let unit = res.unit || "";
            return (
              "{name|" +
              name +
              "}  {value|" +
              res.value +
              "}{unit|" +
              unit +
              "}"
            );
          },
          // data: legendName
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: echartData,
            hoverAnimation: false,
          },
        ],
      };
      return option;
    },
    listData2() {
      let bgColor = "#fff";
      let title = "售票数量";
      let color = [
        "#123597",
        "#0E5CAD",
        "#4C83FF",
        "#97ABFF",
        "#FFA6B7",
        "#49C628",
        "#FFCF71",
        "#3C8CE7",
        "#28C76F",
        "#32CCBC",
      ];
      let echartData = zzsFun(this.echart2).map((e) => {
        return { value: e.zzs, name: e.traderaccount };
      });
      let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);

      var option = {
        backgroundColor: bgColor,
        color: color,
        tooltip: {
          trigger: "item",
        },
        title: [
          {
            text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#666666",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
          {
            text: "单位：张",
            top: 20,
            left: 20,
            textStyle: {
              fontSize: 14,
              color: "#666666",
              fontWeight: 400,
            },
          },
        ],
        legend: {
          orient: "vertical",
          icon: "rect",
          x: "80%",
          y: "center",
          itemWidth: 12,
          itemHeight: 12,
          align: "left",
          left: "20px",
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
              },
              value: {
                fontSize: 16,
                padding: [0, 5, 0, 15],
              },
              unit: {
                fontSize: 12,
              },
            },
          },
          formatter: function (name) {
            let res = echartData.filter((v) => v.name === name);
            res = res[0] || {};
            let unit = res.unit || "";
            return (
              "{name|" +
              name +
              "}  {value|" +
              res.value +
              "}{unit|" +
              unit +
              "}"
            );
          },
          // data: legendName
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: echartData,
            hoverAnimation: false,
          },
        ],
      };
      return option;
    },

    carried() {
      var echart2 = echarts.init(document.querySelector("#echart4"));
      echart2.clear(); //先清除图表
      echart2.setOption(this.listData(), true); //再设置配置
      echart2.hideLoading(); //关闭loading
    },
    carried2() {
      var echart3 = echarts.init(document.querySelector("#echart5"));
      echart3.clear(); //先清除图表
      echart3.setOption(this.listData2(), true); //再设置配置
      echart3.hideLoading(); //关闭loading
    },
  },
};
</script>
<style scoped>
#echart4 {
  width: auto;
  height: 350px;
}
#echart5 {
  width: auto;
  height: 350px;
}
#orderContentH3 {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px;
}
.orderContent3Div {
  display: inline-block;
  width: 45%;
  height: 350px;
  border-right: 10px solid #f0f2f5;
}
</style>